﻿<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>视频直播测试</title>
    <link rel="stylesheet" href="./css/layui.css">
    <link rel="stylesheet" href="./css/rtmp.css">
</head>

<body>
    <div class="wrapper">
        <h1 class="wrapper-title">视频直播测试</h1>
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label">拉流地址</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入拉流地址" class="layui-input" id="hls-url" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">拉流秘钥</label>
                <div class="layui-input-inline rtmp-token-wrapper">
                    <input type="text" class="layui-input" id="hls-token" placeholder="请输入拉流秘钥" value="">
                </div>
                <div class="layui-input-inline">
                    <input type="button" class="layui-btn" value="开始拉流" id="hls-btn">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">视频播放器</label>
                <div class="layui-input-inline">
                    <div id="hls-player"></div>
                </div>
            </div>
        </form>
        <script type="text/javascript" src="./ckplayer/ckplayer.js"></script>
        <script type="text/javascript">
			var hostname = location.hostname;
			var prefix = "http://" + hostname + ":9010/hls/";
			document.getElementById("hls-url").value = prefix;
			document.getElementById("hls-btn").onclick = function(){
				// 点播秘钥
				var token = document.getElementById("hls-token").value;
                var url = document.getElementById("hls-url").value + token + ".m3u8";
                var flashvars = {
                    "lv": "1",
					"s": 4,
                    "c": 0, //不加载文本配置
                    "p": 1, //页面加载完成后直接播放视频
					"f":'ckplayer/m3u8.swf',
                    "a": url
                };			
				
                var params = {
                    "bgcolor": "#fff",
                    "wmode": "transparent",
                    "allowFullScreen": true,
                    "allowScriptAccess": "always"
                };
                CKobject.embedSWF("./ckplayer/ckplayer.swf", "hls-player", "ckplayer_a1", "960", "500", flashvars, params);
			};
        </script>
    </div>
</body>

</html>